
<template>
  <div class="hello">
    <h2 style="background: rgba(0, 0, 0, 0.2); padding: 10px 0">
      vue3-video-player使用
    </h2>
    <van-row gutter="20">
      <van-col span="6"> </van-col>
      <van-col span="12">
        <vue3-video-player
          @play="play_method"
          @pause="onPause"
          @ended="onEnded"
          :src="options.src"
          title="视频标题"
          :cover="options.poster"
          :volume="2"
          :muted="true"
          :loop="true"
        >
        </vue3-video-player>
      </van-col>
    </van-row>
    <div class="tipStyle">
      <a href="https://github.com/LarchLiu/vue3-video-player" target="_blank"
        >vue3-video-player官网
      </a>
      <a
        href="https://core-player.github.io/vue-core-video-player/zh/get-started.html"
        target="_blank"
        >vue3-video-player中文官网
      </a>
      <div>
        yarn add @cloudgeek/vue3-video-player <br />
        在main.ts页面 <br />
        <strong>全局引入<br /></strong>
        import Vue3VideoPlayer from '@cloudgeek/vue3-video-player'<br />
        import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css' <br />
        app.use(Vue3VideoPlayer) <br />
        <strong>.vue文件使用:<br /></strong>
        &lt; Vue3VideoPlayer <br />
        title=""<br />
        :src="options.src" //视频地址<br />
        :cover="options.poster" // 视频封面图<br />
        @play="onPlay"<br />
        @pause="onPause" <br />
        @ended="onEnded" <br />
        &gt; &lt;/Vue3VideoPlayer&gt; <br />
        <strong>配置项:<br /></strong>
        const options = reactive({ <br />
        src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
        //视频源 <br />
        poster: videoImg, //封面 <br />
        }) <br />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { reactive } from "vue";

const videoImg = new URL("../assets/ht.jpg", import.meta.url).href;
const options = reactive({
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  poster: videoImg, //封面
});
const emit = defineEmits(["closeVideoMark"]);

const play_method = (ev) => {
  console.log("播放play_method--");
};
const onPause = (ev) => {
  console.log(ev, "暂停suspend---");
};

const onEnded = (ev) => {
  console.log(ev, "播放结束ended---");
};

const viewCore = (id, player) => {
  console.log(id, player);
};
onMounted(() => {});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.video-content {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba($color: #000000, $alpha: 0.4);
  width: 100%;
  height: 100%;
  .times {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid #666;
    background: #ccc;
    padding: 5px;
    .number {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 20px;
      text-align: center;
    }
  }
}
</style>
